<template>
  <Head title="用户统计" isBack>
    <template #content>
      <Table
        ref="tableRef"
        :columns="data.columns"
        :toolbar="data.toolbar"
        :query="data.query"
        @get-list="getData"
      >
      </Table>
    </template>
  </Head>
</template>

<script lang="ts" setup name="userStatistics">
import Head from '@/components/head/index.vue';
import Table from '@/components/table/index.vue';
import moment from 'moment';
import { queryDicByParent } from '@/service/apis/api';
import {
  pagingSingleOrgTotalInfo,
  EXPORT_PAGINGSINFLEORGTOTALINFO,
} from '@/service/apis/statistical';
import { exportFile } from '@/utils/utils';

const route = useRoute();
const {
  query: { id, orgName, startTime, endTime },
} = route;

const tableRef = ref();

const data = reactive({
  detailData: {} as any,
  columns: [
    {
      prop: 'accountNumber',
      label: '用户账号',
    },
    {
      prop: 'orgName',
      label: '归属企业',
    },
    {
      prop: 'totalPower',
      label: '电量（度）',
      dataNum: 4,
    },
    {
      prop: 'chargedTime',
      label: '充电时长（小时）',
      // dataNum: 4,
    },
    {
      prop: 'count',
      label: '充电次数（次）',
      dataType: String,
    },
    {
      prop: 'totalElecMoney',
      label: '电费（元）',
      dataNum: 4,
      askContent: '电费单价*电量，计算所得订单电费',
    },
    {
      prop: 'totalServiceMoney',
      label: '服务费（元）',
      dataNum: 4,
      askContent: '服务费单价*电量，计算所得订单服务费',
    },
    {
      prop: 'totalAmount',
      label: '订单总金额（元）',
      dataNum: 4,
      askContent: '电费+服务费',
    },
    {
      prop: 'actualAmount',
      label: '用户实付（元）',
      dataNum: 2,
      askContent: '单笔订单用户实际支付金额，即订单总金额-平台所有优惠',
    },
  ],
  toolbar: [
    {
      label: '导出',
      permission: 'enterpriseStatisticsList.export',
      icon: 'icon-export',
      type: 'primary',
      plain: true,
      handle: (row: any) => {
        exportFile(
          EXPORT_PAGINGSINFLEORGTOTALINFO,
          '用户统计',
          tableRef.value?.getForm()
        );
      },
    },
    {
      label: '企业名称',
      // permission: 'channelReconciliationList.export',
      text: true,
      value: orgName,
    },
  ],
  query: [
    {
      label: '统计时间',
      prop: 'data',
      comName: 'date',
      keys: ['startTime', 'endTime'],
      props: {
        type: 'daterange',
      },
    },
    {
      label: '手机号',
      prop: 'mobile',
      comName: 'input',
      props: {
        placeholder: '请输入用户手机号',
      },
    },
    {
      label: '用户账号',
      prop: 'accountNumber',
      comName: 'input',
      props: {
        placeholder: '请输入用户账号',
      },
    },
  ],
});

const getData = (page: any, search: any) => {
  nextTick(() => {
    let form: any = search.ruleForm;
    if (!form.data) {
      form.data = [startTime, endTime];
    }
    if (form.data && form.data.length > 0) {
      form.startTime = form.data[0];
      form.endTime = form.data[1];
    }
    form.accountNumberGroup = 1;
    form.orgTotalId = id;
    pagingSingleOrgTotalInfo(form, page).then((res: any) => {
      if (res) {
        if (
          page.pageNo !== 1 &&
          (!res.dataList || res.dataList?.length === 0)
        ) {
          page.pageNo--;
          getData(page, search);
          return;
        }
        nextTick(() => {
          tableRef.value.setTable({
            total: res.totalCount,
            table: res.dataList,
          });
        });
      }
    });
  });
};
</script>
<style lang="scss" scoped>
@import '@/assets/styles/head.scss';
.card {
  padding: 30px 0;
  margin: 20px 0;
  .card-content {
    width: 100%;
    .card-data {
      .card-item {
        display: flex;
        text-align: left;
        .title {
          margin-left: 12px;
        }
        .iconfont {
          font-size: 56px;
        }
      }
    }
  }
}
</style>